<template>
<div>
  <div>
    <div style="display: flex; justify-content: space-between">
      <div>
        <el-input
            :disabled="showSearch"
            size="small"
            prefix-icon="el-icon-search"
            placeholder="输入员工名进行搜索"
            @clear="initEmps"
            clearable
            v-model="empName"
            @keydown.enter.native="initEmps"
            style="width: 400px;margin-right: 20px"></el-input>
        <el-button icon="el-icon-search" type="primary" size="small" :disabled="showSearch" @click="initEmps">搜索</el-button>
        <el-button type="primary" :icon="arrow" size="small" @click="showSearch=!showSearch">高级搜索</el-button>
      </div>
      <div>
        <el-upload
            :show-file-list="false"
            style="display: inline-block;margin-right: 8px"
            class="upload-demo"
            :disabled="disable"
            :headers="header"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            action="/employee/basic/import">
          <el-button type="success" size="small" :icon="beforeIcon" :disabled="disable">{{beforeText}}</el-button>
        </el-upload>
        <el-button type="success" size="small" icon="el-icon-upload2" @click="exportData">导出数据</el-button>
        <el-button type="primary" size="small" icon="el-icon-plus" @click="addEmp">添加员工</el-button>
      </div>
  </div>
  </div>
  <transition name="slide-fade">
  <div v-show="showSearch" style="border: 1px solid #409eff;border-radius: 5px;box-sizing:border-box;padding: 5px;margin: 10px 0">
<el-row>
  <el-col :span="5">
    政治面貌
    <el-select size="mini" style="width: 130px" v-model="searchValue.politicId" placeholder="政治面貌">
      <el-option
          v-for="item in politicIds"
          :key="item.id"
          :label="item.name"
          :value="item.id">
      </el-option>
    </el-select>
  </el-col>
  <el-col :span="4">
    民族
    <el-select size="mini" v-model="searchValue.nationId" placeholder="民族" style="width: 130px">
      <el-option
          v-for="item in nations"
          :key="item.id"
          :label="item.name"
          :value="item.id">
      </el-option>
    </el-select>
  </el-col>
  <el-col :span="5">
    职位
    <el-select size="mini" v-model="searchValue.posId" placeholder="职位" style="width: 130px">
      <el-option
          v-for="item in positions"
          :key="item.id"
          :label="item.name"
          :value="item.id">
      </el-option>
    </el-select>
  </el-col>
  <el-col :span="5">
    职称
    <el-select size="mini" v-model="searchValue.jobLevelId" placeholder="职称" style="width: 130px">
      <el-option
          v-for="item in jobLevels"
          :key="item.id"
          :label="item.name"
          :value="item.id">
      </el-option>
    </el-select>
  </el-col>
  <el-col :span="5">
    聘用形式
    <el-radio-group v-model="searchValue.engageForm" size="mini" style="width: 130px">
      <el-radio label="劳动合同">劳动合同</el-radio>
      <el-radio label="劳务合同">劳务合同</el-radio>
    </el-radio-group>
  </el-col>
</el-row>
    <el-row>
      <el-col :span="5">
        所属部门
        <el-select style="width: 130px ;margin-top: 10px" size="mini" v-model="searchValue.departmentId" placeholder="请选择所属部门">
          <el-option
              v-for="item in departments"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        入职日期
          <el-date-picker
              style="width: 280px ;margin-top: 10px"
              size="mini"
              v-model="searchValue.beginDateScope"
              type="datetimerange"
              unlink-panels
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
      </el-col>
      <el-col :span="6" style="margin-top: 10px;margin-left: 200px">
        <el-button size="mini">取消</el-button>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="initEmps('adv')">搜索</el-button>
      </el-col>
    </el-row>
  </div>
    </transition>
  <div>
    <el-table
        :data="emps"
        border
        size="small"
        stripe
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="width: 100%;margin-top: 30px">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="70"
          fixed="left">
      </el-table-column>
      <el-table-column
          prop="workID"
          label="工号"
          align="left"
          width="80">
      </el-table-column>
      <el-table-column
          prop="gender"
          label="性别"
          align="left"
          width="50">
      </el-table-column>
      <el-table-column
          prop="birthday"
          label="出生日期"
          align="left"
          width="90">
      </el-table-column>
      <el-table-column
          prop="idCard"
          label="身份证号"
          align="center"
          width="150">
      </el-table-column>
      <el-table-column
          prop="wedlock"
          label="婚姻状况"
          align="center"
          width="70">
      </el-table-column>
      <el-table-column
        prop="nation.name"
        label="民族"
        align="left"
        width="50">
    </el-table-column>
      <el-table-column
        prop="nativePlace"
        label="籍贯"
        align="center"
        width="70">
    </el-table-column> <el-table-column
        prop="politicsStatus.name"
        label="政治面貌"
        align="left"
        width="100">
    </el-table-column> <el-table-column
        prop="email"
        label="邮箱"
        align="center"
        width="145">
    </el-table-column> <el-table-column
        prop="phone"
        label="电话号码"
        align="left"
        width="100">
    </el-table-column> <el-table-column
        prop="address"
        label="联系地址"
        align="left"
        width="220">
    </el-table-column>
      <el-table-column
          prop="department.name"
          label="所属部门"
          align="center"
          width="90">
      </el-table-column>
      <el-table-column
          prop="joblevel.name"
          label="职称"
          align="left"
          width="100">
      </el-table-column> <el-table-column
        prop="position.name"
        label="职位"
        align="posId"
        width="90">
    </el-table-column>
      <el-table-column
          prop="engageForm"
          label="聘用形式"
          align="left"
          width="80">
      </el-table-column>
      <el-table-column
          prop="tiptopDegree"
          label="学历"
          align="left"
          width="60">
      </el-table-column>
      <el-table-column
          prop="specialty"
          label="专业"
          align="center"
          width="110">
      </el-table-column>
      <el-table-column
          prop="school"
          label="毕业学校"
          align="left"
          width="120">
      </el-table-column>
      <el-table-column
          prop="beginDate"
          label="入职日期"
          align="left"
          width="90">
      </el-table-column> <el-table-column
        prop="workState"
        label="在职状态"
        align="left"
        width="70">
    </el-table-column>
      <el-table-column
          label="合同期限"
          align="left"
          width="90">
        <template slot-scope="scope">
        <el-tag>{{scope.row.contractTerm}}年</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="conversionTime"
          label="转正日期"
          align="left"
          width="90">
      </el-table-column>
      <el-table-column
          prop="beginContract"
          label="合同起始日期"
          align="left"
          width="90">
      </el-table-column>
      <el-table-column
          prop="endContract"
          label="合同终止日期"
          align="left"
          width="90">
      </el-table-column>
      <el-table-column
          label="操作"
          fixed="right"
          width="200">
        <template slot-scope="scope">
          <el-button type="info" size="mini" style="padding: 3px" @click="showEmp(scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" style="padding: 3px">查看高级资料</el-button>
          <el-button type="danger" size="mini" style="padding: 3px" @click="deleteEmp(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        layout="sizes, prev, pager, next, jumper, ->, total, slot"
        :total="total">
    </el-pagination>
  </div>
  <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%">
    <div>
      <el-form ref="empForm" :model="emp" :rules="rules" label-width="120px">
        <el-form-item label="姓名：" prop="name">
          <el-input prefix-icon="el-icon-edit" v-model="emp.name" placeholder="请输入员工姓名" size="small" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="性别：" prop="gender">
          <el-radio-group v-model="emp.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期：" prop="birthday">
          <el-date-picker
              v-model="emp.birthday"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              size="small">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="政治面貌：" prop="politicId">
          <el-select size="small" v-model="emp.politicId" placeholder="政治面貌">
            <el-option
                v-for="item in politicIds"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="民族：" prop="nationId">
          <el-select size="small" v-model="emp.nationId" placeholder="民族">
            <el-option
                v-for="item in nations"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="籍贯：" prop="nativePlace">
          <el-input prefix-icon="el-icon-edit" v-model="emp.nativePlace" placeholder="请输入籍贯" size="small" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱：" prop="email">
          <el-input prefix-icon="el-icon-message" v-model="emp.email" placeholder="请输入邮箱" size="small" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="联系地址：" prop="address">
          <el-input prefix-icon="el-icon-edit" v-model="emp.address" placeholder="请输入联系地址" size="small" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="职位：" prop="posId">
          <el-select size="small" v-model="emp.posId" placeholder="职位">
            <el-option
                v-for="item in positions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职称：" prop="jobLevelId">
          <el-select size="small" v-model="emp.jobLevelId" placeholder="职称">
            <el-option
                v-for="item in jobLevels"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门：" prop="departmentId">
          <el-select v-model="emp.departmentId" placeholder="请选择所属部门">
            <el-option
                v-for="item in departments"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话号码：" prop="phone">
          <el-input prefix-icon="el-icon-phone" v-model="emp.phone" placeholder="电话号码" size="small" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="工号：" prop="workID">
          <el-input disabled prefix-icon="el-icon-edit" v-model="emp.workID" placeholder="工号" size="small" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="学历：" prop="tiptopDegree">
          <el-select size="small" v-model="emp.tiptopDegree" placeholder="学历">
            <el-option
                v-for="item in tiptopDegrees"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="毕业院校：" prop="school">
          <el-input prefix-icon="el-icon-edit" v-model="emp.school" placeholder="毕业院校" size="small" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="专业名称：" prop="specialty">
          <el-input prefix-icon="el-icon-edit" v-model="emp.specialty" placeholder="专业名称" size="small" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="入职日期：" prop="beginDate">
          <el-date-picker
              v-model="emp.beginDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              size="small">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="转正日期：" prop="conversionTime">
          <el-date-picker
              v-model="emp.conversionTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              size="small">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同起始日：" prop="beginContract">
          <el-date-picker
              v-model="emp.beginContract"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              size="small">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同终止日：" prop="endContract">
          <el-date-picker
              v-model="emp.endContract"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              size="small">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="身份证号码：" prop="idCard">
          <el-input prefix-icon="el-icon-edit" v-model="emp.idCard" placeholder="身份证号码" size="small" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="聘用形式：" prop="engageForm">
          <el-radio-group v-model="emp.engageForm">
            <el-radio label="劳动合同">劳动合同</el-radio>
            <el-radio label="劳务合同">劳务合同</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="婚姻状况：" prop="wedlock">
          <el-radio-group v-model="emp.wedlock">
            <el-radio label="已婚">已婚</el-radio>
            <el-radio label="未婚">未婚</el-radio>
            <el-radio label="离异">离异</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="additionEmp">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
export default {
name: "EmpBasic",
  data(){
  return{
    searchValue:{
      politicId:null,
      nationId:null,
      jobLevelId:null,
      posId:null,
      engageForm:'',
      departmentId:null,
      beginDateScope:null
    },
    arrow:'el-icon-arrow-down',
    showSearch:false,
    header:{
      Authorization:window.sessionStorage.getItem('tokenStr')
    },
    disable:false,
    beforeIcon:'el-icon-download',
    beforeText:'导入数据',
    title:'',
    defaultParams: {
      label: 'name',
      children: 'children',
      value:'id'
    },
    departments:[],//所属部门
    tiptopDegrees:['博士','硕士','本科','大专','高中','初中','小学','其他'],//学历
    positions:[],//职位
    politicIds:[], //政治面貌
    nations:[],//民族
    jobLevels:[],//职称
    dialogVisible:false,
    emps:[],
    loading:false,
    total:0,
    currentPage:1,
    size:10,
    empName:'',
    emp:{
      'id':null,
      'name':'',
      'gender':'',
      'birthday': '',
      'idCard': '',
      'wedlock': '',
      'nationId': null,
      'nativePlace': '',
      'politicId': null,
      'email': '',
      'phone': '',
      'address': '',
      'departmentId': null,
      'joblevelId': null,
      'posId': null,
      'engageForm': '',
      'tiptopDegree': '',
      'specialty': '',
      'school': '',
      'beginDate': '',
      'workState': '在职',
      'workID': null,
      'contractTerm': null,
      'conversionTime':'' ,
      'notWorkDate': null,
      'beginContract': '',
      'endContract': '',
      'workAge': null,
      'salaryId': null
    },
    rules: {
      name:[{required:true,message: '请输入员工姓名',trigger: 'blur'}],
      gender:[{required:true,message: '请输入输入员工性别',trigger: 'blur'}],
      birthday: [{required:true,message: '请输入输入员工出生日期',trigger: 'blur'}],
      idCard: [{required:true,message: '请输入输入员工身份证号',trigger: 'blur'},
        {pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,message: '请输入正确的身份证号码',trigger: "blur"}],
      wedlock: [{required:true,message: '请输入输入员工婚姻状况',trigger: 'blur'}],
      nationId: [{required:true,message: '请输入输入员工民族',trigger: 'blur'}],
      nativePlace: [{required:true,message: '请输入输入员工籍贯',trigger: 'blur'}],
      politicId: [{required:true,message: '请输入输入员工政治面貌',trigger: 'blur'}],
      email: [{required:true,message: '请输入输入员工邮箱',trigger: 'blur'}],
      phone: [{required:true,message: '请输入输入员工电话号码',trigger: 'blur'},
        {pattern:/(^1\d{10}$)|(^[0-9]\d{7}$)/,message: '请输入正确的电话号码',trigger: "blur"}],
      address: [{required:true,message: '请输入输入员工地址',trigger: 'blur'}],
      departmentId: [{required:true,message: '请输入输入员工所属部门',trigger: 'blur'}],
      joblevelId: [{required:true,message: '请输入输入员工职称',trigger: 'blur'}],
      posId: [{required:true,message: '请输入输入员工职位',trigger: 'blur'}],
      engageForm: [{required:true,message: '请输入输入员工聘用形式',trigger: 'blur'}],
      tiptopDegree: [{required:true,message: '请输入输入员工学历',trigger: 'blur'}],
      specialty:[{required:true,message: '请输入输入员工专业',trigger: 'blur'}],
      school: [{required:true,message: '请输入输入员工毕业院校',trigger: 'blur'}],
      beginDate: [{required:true,message: '请输入输入员工入职日期',trigger: 'blur'}],
      contractTerm: [{required:true,message: '请输入输入员工合同期限',trigger: 'blur'}],
      conversionTime:[{required:true,message: '请输入输入员工转正日期',trigger: 'blur'}] ,
      notWorkDate: [{required:true,message: '请输入输入员工离职日期',trigger: 'blur'}],
      beginContract: [{required:true,message: '请输入输入员工合同起始日期',trigger: 'blur'}],
      endContract: [{required:true,message: '请输入输入员工合同终止日期',trigger: 'blur'}]
    }
  }
  },
  methods:{
    showSea(){
      this.arrow ='el-icon-arrow-up'
      this.showSearch = true
    },
    uploadSuccess(){
      this.beforeIcon = 'el-icon-download'
      this.beforeText = '导入数据'
      this.disable = false
      this.initEmps()
    },
    uploadError(){
      this.beforeIcon = 'el-icon-download'
      this.beforeText = '导入数据'
      this.disable = false
    },
    beforeUpload(){
      this.beforeIcon = 'el-icon-loading'
      this.beforeText = '正在导入'
      this.disable = true
    },
    exportData(){//导出数据
      this.downloadRequest('/employee/basic/export')
    },
    showEmp(row){
      this.emp = row
      this.title = '编辑员工'
      this.dialogVisible = true
      this.initPosition()
    },
    deleteEmp(row){
      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/employee/basic/delete/' + row.id).then(res=>{
          if (res){
            this.initEmps()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    additionEmp(){
      if(this.emp.id){
        this.$refs.empForm.validate(valid => {
          if (valid) {
            this.putRequest('/employee/basic/update',this.emp).then(res=>{
              if (res){
                this.initEmps()
                this.dialogVisible = false
              }
            })
          }
        })
      }else {
        this.$refs.empForm.validate(valid => {
          if (valid) {
            this.postRequest('/employee/basic/addEmp',this.emp).then(res=>{
              if (res){
                this.initEmps()
                this.dialogVisible = false
              }
            })
          }
        })
      }

    },
  initWorks(){
    this.getRequest('/employee/basic/get-max-WorkID').then(res=>{
      if(res){
        this.emp.workID = res.obj
      }
    })
  },
  initPosition(){
    this.getRequest('/employee/basic/get-all-Position').then(res=>{
      if(res){
        this.positions = res
      }
    })
  },
  initData(){
    if(!window.sessionStorage.getItem('politicIds')){
      this.getRequest('/employee/basic/get-politics-status').then(res=>{
        if (res){
          this.politicIds = res
          window.sessionStorage.setItem('politicIds',JSON.stringify(res))
        }
      })
    }else {
     this.politicIds = JSON.parse(window.sessionStorage.getItem('politicIds'))
    }
    if(!window.sessionStorage.getItem('nations')){
      this.getRequest('/employee/basic/get-all-Nation').then(res=>{
        if (res){
          this.nations = res
          window.sessionStorage.setItem('nations',JSON.stringify(res))
        }
      })
    }else {
      this.nations = JSON.parse(window.sessionStorage.getItem('nations'))
    }
    if(!window.sessionStorage.getItem('jobLevels')){
      this.getRequest('/employee/basic/get-all-job').then(res=>{
        if (res){
          this.jobLevels = res
          window.sessionStorage.setItem('jobLevels',JSON.stringify(res))
        }
      })
    }else {
      this.jobLevels = JSON.parse(window.sessionStorage.getItem('jobLevels'))
    }
    if(!window.sessionStorage.getItem('departments')){
      this.getRequest('/employee/basic/get-all-Department').then(res=>{
        if(res){
          this.departments = res
          window.sessionStorage.setItem('departments',JSON.stringify(res))
        }
      })
    }else {
      this.departments = JSON.parse(window.sessionStorage.getItem('departments'))
    }
  },
  addEmp(){
      this.title = '添加员工'
    this.dialogVisible = true
    this.initWorks()
    this.emp={
           'id':null,
           'name':'',
          'gender':'',
          'birthday': '',
          'idCard': '',
          'wedlock': '',
          'nationId': null,
          'nativePlace': '',
          'politicId': null,
          'email': '',
          'phone': '',
          'address': '',
          'departmentId': null,
          'joblevelId': null,
          'posId': null,
          'engageForm': '',
          'tiptopDegree': '',
          'specialty': '',
          'school': '',
          'beginDate': '',
          'workState': '在职',
          'workID': null,
          'contractTerm': null,
          'conversionTime':'' ,
          'notWorkDate': null,
          'beginContract': '',
          'endContract': '',
          'workAge': null,
          'salaryId': null
    }
  },
  handleCurrentChange(val){
      this.currentPage = val
       this.initEmps()
    },
  handleSizeChange(val){
      this.size= val
      this.initEmps()
    },
  initEmps(type){
    this.loading = true
    let url = '/employee/basic/list?currentPage='+this.currentPage + '&size='+ this.size
    if(type && type === 'adv'){
      if(this.searchValue.beginDateScope){
        url +='&beginDteScope=' + this.searchValue.beginDateScope
      }
      if(this.searchValue.departmentId){
        url += '&departmentId=' + this.searchValue.departmentId
      }
      if(this.searchValue.engageForm){
        url += '&engageForm=' + this.searchValue.engageForm
      }
      if(this.searchValue.jobLevelId){
        url += '&jobLevelId=' + this.searchValue.jobLevelId
      }
      if(this.searchValue.politicId){
        url += '&politicId=' + this.searchValue.politicId
      }
      if(this.searchValue.posId){
        url += '&posId=' + this.searchValue.posId
      }
      if(this.searchValue.nationId){
        url += '&nationId=' + this.searchValue.nationId
      }
    } else{
      url +='&name=' + this.empName
    }
    this.getRequest(url).then(res=>{
      if(res){
        this.emps=res.date
        this.total = res.total
        this.loading = false
        console.log(res.total)
      }
    })
  }
  },
  mounted() {
  this.initEmps()
  this.initData()
  this.initPosition()
  }
}
</script>

<style scoped>
/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all .8s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>